<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Arcgis地图</title>
    <style>
        html, body, #map {
            padding: 0;
            margin: 0;
            height: 500px;
        }
    </style>
    <script src="/ArcgisMap/static/js/app.js"></script>
    <script type="text/javascript">
        var dojoConfig = {
            async: true,
            packages: [{
                "name": "layerjs",
                "location": app.contextPath + "/static/js/arcgis/measure"
            }]
        };
    </script>
</head>
<body>
<div id="map" style="border: 1px solid #000;"></div>
<div id="measureTools">
    <button class="measure-distance">距离</button>
    <button class="measure-area">面积</button>
    <button id="btn_query">道路查询</button>
</div>
<div id="lngLats"></div>

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css"
      href="http://192.168.1.21:8081/arcgis_js_api/library/3.19/3.19/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css"
      href="http://192.168.1.21:8081/arcgis_js_api/library/3.19/3.19/esri/css/esri.css"/>
<script type="text/javascript" src="http://192.168.1.21:8081/arcgis_js_api/library/3.19/3.19/init.js"></script>

<script type="text/javascript">

    require([
            "esri/map",
            "esri/SpatialReference",
            "esri/Color",
            "esri/graphic",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/GraphicsLayer",
            "esri/geometry/Point",
            "esri/geometry/webMercatorUtils",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/PictureMarkerSymbol",
            "esri/tasks/QueryTask",
            "esri/tasks/query",
            "layerjs/MeasureTools",
            "dojo/dom",
            "dojo/on",
            "dojo/domReady!"
        ],
        function (Map, SpatialReference, Color, Graphic, ArcGISTiledMapServiceLayer, GraphicsLayer, Point, webMercatorUtils, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, PictureMarkerSymbol, QueryTask, Query, MeasureTools, dom, on) {
            var map = null; //地图
            var tileLayer = null;
            var wkId = 4490;
            //var wkId = 4326;
            var spatialReference = new SpatialReference(wkId); //空间参考
            var center = new Point(118.77880836658694, 32.04400280727758, spatialReference);    //中心坐标点
            var roadLayer = new GraphicsLayer();

            //创建地图
            map = new Map("map", {
                center: center,
                zoom: 9
            });

            //添加图层
            if (spatialReference.wkid == 4326) {
                tileLayer = new ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer");
            } else {
                tileLayer = new ArcGISTiledMapServiceLayer("http://10.254.0.39:6080/arcgis/rest/services/底图服务/BaseMap_SS_EsriColor_L0L10/MapServer");
            }

            var mapUrl = "http://10.254.0.39:6080/arcgis/rest/services/底图服务/BaseMap_SS_EsriColor_L0L10/MapServer/151";
            var queryTask = new QueryTask(mapUrl);
            var query = new Query();

            map.addLayer(tileLayer);
            map.addLayer(roadLayer);

            //添加工具
            var measureTool = new MeasureTools({
                map: map
            }, "measureTools");

            //添加事件
            map.on("load", function () {
                map.on("click", mapClick);
                on(dom.byId("btn_query"), "click", queryRoad);
                on(roadLayer, "click", roadClick);
            });

            //地图点击事件
            function mapClick(evt) {

                var mp = null;
                if (evt.mapPoint.spatialReference.isWebMercator()) {
                    mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
                } else {
                    mp = evt.mapPoint;
                }
                $('#lngLats').append(mp.x.toFixed(8) + ',' + mp.y.toFixed(8) + '</br>');

                drawMarker(mp.x, mp.y);
            }

            //绘制标记
            function drawMarker(x, y) {

//                var markerSymbol = new SimpleMarkerSymbol();
//                markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
//                markerSymbol.setColor(new Color("#00FFFF"));

                var markerSymbol = new PictureMarkerSymbol({
                    "angle": 0,
                    "xoffset": 0,
                    "yoffset": 12,
                    "type": "esriPMS",
                    "url": app.contextPath + "/static/images/marker.png",
                    "contentType": "image/png",
                    "width": 24,
                    "height": 24
                });

                var point = new Point(x, y, spatialReference);
                map.graphics.add(new Graphic(point, markerSymbol));
            }

            //查询道路
            function queryRoad() {
                query.where = "1=1";
                query.outFields = ["*"];
                query.returnGeometry = true;
                queryTask.execute(query, showRoad);
            }

            //显示道路
            function showRoad(result) {
                var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,191,255]), 6);
                var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, lineSymbol);

                var html = '';
                for (var i = 0; i < result.features.length; i++) {
                    var graphic = result.features[i];
                    graphic.setSymbol(fill);
                    roadLayer.add(graphic);

//                    var LXBM = graphic.attributes["LXBM"];
//                    html += '<li>' + LXBM + '</li>';
                }
                $('#lngLats').html(html);
            }

            //路线点击事件
            function roadClick(event) {
                var graphic = event.graphic;
                alert(graphic.attributes["LXBM"]);
            }
        }
    );
</script>
</body>